<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")

    <link rel="stylesheet" href="/static/ajax/libs/codemirror/5.58.2/codemirror.css"/>

    <script src="/static/ajax/libs/codemirror/5.58.2/codemirror.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldgutter.css"/>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldcode.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldgutter.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/brace-fold.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/comment-fold.js"></script>


    <!--    sqlformatter-->
    <script src="/static/ajax/libs/sql-formatter/2.3.3/sql-formatter.min.js"></script>

    <style>
        .CodeMirror {
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>

<div class="container">
    #include("../include/menu.html")

    <div class="row" style="margin-bottom: 10px">

        <div class="col-sm-12">
            <!-- begin code -->
            <textarea class="form-control" id="codeInput" name="codeInput"></textarea>
            <!-- end code-->
        </div>
        <div class="col-sm-12" style="margin:10px 0;">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-info" onclick="beautifySQL()">Beautify SQL</button>
                    <button type="button" class="btn btn-success" onclick="minifySQL()">Minify SQL</button>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <!-- begin code -->
            <textarea class="form-control" id="codeOutput" name="codeOutput"></textarea>
            <!-- end code-->
        </div>
    </div>

</div>

#include("../include/footer.html")

<script>
    var codeInputEditor;

    var codeOutputEditor;
    $(function () {
        //根据DOM元素的id构造出一个编辑器
        codeInputEditor = initCodeMirror(document.getElementById("codeInput"));
        codeInputEditor.setValue("SELECT city, COUNT(id) AS users_count FROM users WHERE group_name = 'salesman'AND created > '2011-05-21'GROUP BY 1 ORDER BY 2 DESC\n");

        codeOutputEditor = initCodeMirror(document.getElementById("codeOutput"));
    });

    function initCodeMirror(el) {
        return CodeMirror.fromTextArea(el, {
            lineNumbers: true,	//显示行号
            theme: "dracula",	//设置主题
            lineWrapping: true,	//代码折叠
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            matchBrackets: true,	//括号匹配

            mode: "sql",
            //readOnly: true,        //只读
        });

    }

    function beautifySQL() {
        var val = sqlFormatter.format(codeInputEditor.getValue(), {});
        codeOutputEditor.setValue(val);
    }

    function minifySQL() {
        var txts = codeInputEditor.getValue()
        txts = txts.replace(/[\n\r]/g, ' ')
        codeOutputEditor.setValue(txts);
    }

</script>
</body>
</html>